<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据看板系统 - 数据上传中心</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 全局样式 - 科技感设计 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 20px;
      color: #e2e8f0;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: rgba(15, 23, 42, 0.8);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.3);
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .logo-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text {
      font-size: 28px;
      font-weight: 700;
      color: #f8fafc;
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text span {
      color: #5eead4;
    }
    
    .nav-buttons {
      display: flex;
      gap: 15px;
    }
    
    .nav-button {
      background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
      color: white;
      padding: 12px 25px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(167, 139, 250, 0.3);
    }
    
    .nav-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
      background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    }
    
    .nav-button.active {
      background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    }
    
    .page-title {
      text-align: center;
      font-size: 36px;
      margin: 20px 0 40px;
      background: linear-gradient(90deg, #3b82f6, #10b981, #6366f1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .page-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6, #10b981, #6366f1);
      border-radius: 3px;
    }
    
    /* 表单区域样式 */
    .form-section, .excel-upload-section {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      margin-bottom: 30px;
      border: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .section-title {
      font-size: 22px;
      margin-bottom: 25px;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.1);
    }
    
    .section-title i {
      color: #3b82f6;
    }
    
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
      margin-bottom: 30px;
    }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .form-label {
      font-weight: 600;
      color: #94a3b8;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .form-label i {
      color: #3b82f6;
    }
    
    .form-control {
      padding: 12px 18px;
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(94, 234, 212, 0.2);
      border-radius: 8px;
      font-size: 16px;
      color: #e2e8f0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .form-control:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    }
    
    .form-hint {
      font-size: 13px;
      color: #64748b;
      margin-top: 5px;
    }
    
    .form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      margin-top: 20px;
    }
    
    .btn {
      padding: 12px 25px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      border: none;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: white;
      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
      background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    }
    
    .btn-secondary {
      background: linear-gradient(135deg, #475569 0%, #334155 100%);
      color: #e2e8f0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    }
    
    /* 文件上传样式 */
    .file-upload {
      border: 2px dashed rgba(94, 234, 212, 0.2);
      border-radius: 12px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
      background: rgba(15, 23, 42, 0.3);
      position: relative;
      overflow: hidden;
    }
    
    .file-upload:hover {
      border-color: #3b82f6;
      background: rgba(15, 23, 42, 0.5);
    }
    
    .file-upload input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }
    
    .file-upload-icon {
      font-size: 40px;
      color: #3b82f6;
      margin-bottom: 15px;
    }
    
    .file-upload-text {
      margin-bottom: 10px;
      color: #e2e8f0;
    }
    
    .file-upload-hint {
      font-size: 13px;
      color: #64748b;
    }
    
    .file-preview {
      margin-top: 20px;
      max-width: 100%;
      border-radius: 8px;
      display: none;
    }
    
    .file-preview img {
      max-width: 100%;
      border-radius: 8px;
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    /* Excel上传区域特殊样式 */
    .excel-upload-section .file-upload {
      margin-bottom: 30px;
    }
    
    .excel-template {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #3b82f6;
      text-decoration: none;
      font-weight: 600;
      padding: 8px 15px;
      border-radius: 6px;
      background: rgba(59, 130, 246, 0.1);
      transition: all 0.3s ease;
    }
    
    .excel-template:hover {
      background: rgba(59, 130, 246, 0.2);
      transform: translateY(-2px);
    }
    
    /* 成功提示消息 */
    .success-message {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      padding: 15px 25px;
      border-radius: 8px;
      margin-bottom: 30px;
      display: none;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }
    
    .success-message i {
      font-size: 20px;
    }
    
    /* 通知提示框 */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 15px 25px;
      background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
      color: white;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .notification.show {
      transform: translateY(0);
      opacity: 1;
    }
    
    /* 连接状态指示器 */
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .status-online {
      background-color: #10b981;
      box-shadow: 0 0 8px #10b981;
    }
    
    .status-offline {
      background-color: #f87171;
    }
    
    .connection-status {
      position: fixed;
      bottom: 20px;
      left: 20px;
      padding: 8px 16px;
      background: rgba(15, 23, 42, 0.9);
      border-radius: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
      
      .nav-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }
      
      .page-title {
        font-size: 28px;
        margin: 10px 0 25px;
      }
      
      .page-title::after {
        width: 150px;
      }
      
      .form-grid {
        grid-template-columns: 1fr;
      }
      
      .form-actions {
        flex-direction: column;
      }
      
      .btn {
        width: 100%;
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <div class="logo-icon"><i class="fas fa-chart-network"></i></div>
        <div class="logo-text">数据<span>看板</span>系统</div>
      </div>
      <div class="nav-buttons">
        <a href="index.html" class="nav-button"><i class="fas fa-home"></i> 首页</a>
        <a href="upload.html" class="nav-button active"><i class="fas fa-cloud-upload-alt"></i> 数据上传</a>
        <a href="query.html" class="nav-button"><i class="fas fa-search"></i> 数据查询</a>
        <a href="ranking.html" class="nav-button"><i class="fas fa-trophy"></i> 排行榜</a>
      </div>
    </header>
    
    <h1 class="page-title"><i class="fas fa-cloud-upload-alt"></i> 数据上传中心</h1>
    
    <!-- 成功提示消息 -->
    <div class="success-message" id="successMessage">
      <i class="fas fa-check-circle"></i>
      <div>数据上传成功！</div>
    </div>
    
    <!-- 单条数据上传表单区域 -->
    <section class="form-section">
      <h2 class="section-title"><i class="fas fa-file-alt"></i> 单条数据上传</h2>
      
      <form id="dataUploadForm">
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label"><i class="fas fa-clock"></i> 上传时间</label>
            <input type="datetime-local" id="uploadTime" class="form-control" required>
            <div class="form-hint">默认为当前时间，可手动修改</div>
          </div>
          
          <div class="form-group">
            <label class="form-label"><i class="fas fa-building"></i> 厅名</label>
            <select id="hallName" class="form-control" required>
              <option value="">请选择厅名</option>
              <!-- 厅名会通过JavaScript动态加载 -->
            </select>
            <div class="form-hint" id="hallNameError"></div>
          </div>
          
          <div class="form-group">
            <label class="form-label"><i class="fas fa-user"></i> 主持人</label>
            <input type="text" id="hostName" class="form-control" placeholder="请输入主持人名称" required>
            <div class="form-hint">请输入准确的主持人名称</div>
          </div>
          
          <div class="form-group">
            <label class="form-label"><i class="fas fa-link"></i> 主持-厅名</label>
            <input type="text" id="hostHall" class="form-control" placeholder="自动生成" readonly>
            <div class="form-hint">由主持人和厅名id自动组合生成</div>
          </div>
          
          <div class="form-group">
            <label class="form-label"><i class="fas fa-chart-line"></i> 数据值</label>
            <input type="number" id="dataValue" class="form-control" placeholder="请输入数据值" min="0" step="0.01" required>
            <div class="form-hint">请输入有效的数字，支持小数</div>
          </div>
          
          <div class="form-group">
            <label class="form-label"><i class="fas fa-chart-pie"></i> 大头数据值</label>
            <input type="number" id="headDataValue" class="form-control" placeholder="请输入大头数据值（可选）" min="0" step="0.01">
            <div class="form-hint">可选字段，无大头数据可留空</div>
          </div>
          
          <div class="form-group" style="grid-column: span 2;">
            <label class="form-label"><i class="fas fa-image"></i> 数据截图</label>
            <div class="file-upload" onclick="document.getElementById('dataScreenshot').click()">
              <i class="fas fa-cloud-upload-alt file-upload-icon"></i>
              <div class="file-upload-text">点击上传数据截图（可选）</div>
              <div class="file-upload-hint">支持JPG、PNG格式，最大5MB</div>
              <input type="file" id="dataScreenshot" accept="image/jpeg, image/png" style="display: none;" onchange="previewImage(this, 'dataScreenshotPreview')">
            </div>
            <div id="dataScreenshotPreview" class="file-preview"></div>
          </div>
          
          <div class="form-group" style="grid-column: span 2;">
            <label class="form-label"><i class="fas fa-image"></i> 大头数据截图</label>
            <div class="file-upload" onclick="document.getElementById('headDataScreenshot').click()">
              <i class="fas fa-cloud-upload-alt file-upload-icon"></i>
              <div class="file-upload-text">点击上传大头数据截图（可选）</div>
              <div class="file-upload-hint">仅大头数据有值时需要上传，支持JPG、PNG格式</div>
              <input type="file" id="headDataScreenshot" accept="image/jpeg, image/png" style="display: none;" onchange="previewImage(this, 'headDataScreenshotPreview')">
            </div>
            <div id="headDataScreenshotPreview" class="file-preview"></div>
          </div>
        </div>
        
        <div class="form-actions">
          <button type="reset" class="btn btn-secondary">
            <i class="fas fa-sync-alt"></i> 重置
          </button>
          <button type="submit" id="submitBtn" class="btn btn-primary">
            <i class="fas fa-paper-plane"></i> 单条提交
          </button>
        </div>
      </form>
    </section>
    
    <!-- Excel批量上传独立区域 -->
    <section class="excel-upload-section">
      <h2 class="section-title"><i class="fas fa-file-excel"></i> Excel批量上传</h2>
      
      <div class="file-upload" onclick="document.getElementById('excelFile').click()">
        <i class="fas fa-file-excel file-upload-icon"></i>
        <div class="file-upload-text">点击上传Excel文件批量导入数据</div>
        <div class="file-upload-hint">支持.xlsx格式，最大10MB，请按照模板格式填写</div>
        <input type="file" id="excelFile" accept=".xlsx" style="display: none;">
      </div>
      
      <div style="margin-bottom: 30px;">
        <a href="#" class="excel-template">
          <i class="fas fa-download"></i> 下载Excel模板
        </a>
        <div class="form-hint" style="margin-top: 10px;">
          请严格按照模板格式填写数据，否则可能导致导入失败
        </div>
      </div>
      
      <div class="form-actions">
        <button type="button" id="excelUploadBtn" class="btn btn-primary">
          <i class="fas fa-file-excel"></i> 批量上传Excel
        </button>
      </div>
    </section>
    
    <footer>
      <p>数据看板系统 © 2023 | 实时数据监控与分析平台</p>
      <p style="margin-top: 8px; font-size: 13px; color: #64748b;">版本 2.1.0 | 最后更新: 2025-08-06</p>
    </footer>
  </div>

  <!-- 通知提示框 -->
  <div class="notification" id="notification">
    <i class="fas fa-check-circle"></i>
    <div>操作成功</div>
  </div>
  
  <!-- 连接状态指示器 -->
  <div class="connection-status" id="connectionStatus">
    <span class="status-indicator status-online"></span>
    <span>后端服务已连接</span>
  </div>

  <script>
    const API_BASE_URL = 'http://localhost:3000/api/data';
    
    document.addEventListener('DOMContentLoaded', function() {
      const now = new Date();
      const formattedDateTime = now.toISOString().slice(0, 16);
      document.getElementById('uploadTime').value = formattedDateTime;
      
      loadHallList();
      
      // 自动生成主持-厅名
      const hallName = document.getElementById('hallName');
      const hostName = document.getElementById('hostName');
      const hostHall = document.getElementById('hostHall');
      
      function updateHostHall() {
        if (hallName.value && hostName.value) {
          hostHall.value = `${hostName.value}-${hallName.value}`;
        } else {
          hostHall.value = '';
        }
      }
      
      hallName.addEventListener('change', updateHostHall);
      hostName.addEventListener('input', updateHostHall);
      
      // 单条数据上传表单处理
      const form = document.getElementById('dataUploadForm');
      const successMessage = document.getElementById('successMessage');
      const submitBtn = document.getElementById('submitBtn');
      
      form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
        submitBtn.disabled = true;
        
        try {
          const formData = new FormData();
          let hallName;
          if(allHalls.length > 0){

            hallName = allHalls.find(hall => hall.id == document.getElementById('hallName').value).hall_name;
          }
          formData.append('uploadTime', document.getElementById('uploadTime').value);
          formData.append('hallName', hallName);
          formData.append('hostName', document.getElementById('hostName').value);
          formData.append('dataValue', document.getElementById('dataValue').value);
          formData.append('hallId', document.getElementById('hallName').value);
          formData.append('headDataValue', document.getElementById('headDataValue').value || '');
          formData.append('hostHall', document.getElementById('hostHall').value);
          
          const dataScreenshot = document.getElementById('dataScreenshot').files[0];
          if (dataScreenshot) formData.append('dataScreenshot', dataScreenshot);
          
          const headDataScreenshot = document.getElementById('headDataScreenshot').files[0];
          if (headDataScreenshot) formData.append('headDataScreenshot', headDataScreenshot);
          
          const response = await fetch(`${API_BASE_URL}/upload`, {
            method: 'POST',
            body: formData
          });
          
          const result = await response.json();
          if (response.ok) {
            successMessage.style.display = 'flex';
            document.getElementById('notification').innerHTML = '<i class="fas fa-check-circle"></i><div>数据上传成功</div>';
            document.getElementById('notification').classList.add('show');
            
            setTimeout(() => {
              form.reset();
              document.getElementById('dataScreenshotPreview').style.display = 'none';
              document.getElementById('headDataScreenshotPreview').style.display = 'none';
              document.getElementById('uploadTime').value = formattedDateTime;
              successMessage.style.display = 'none';
              document.getElementById('notification').classList.remove('show');
              submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 单条提交';
              submitBtn.disabled = false;
            }, 3000);
          } else {
            alert('上传失败: ' + result.error);
            submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 单条提交';
            submitBtn.disabled = false;
          }
        } catch (error) {
          console.error('上传错误:', error);
          alert('网络错误，上传失败');
          submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 单条提交';
          submitBtn.disabled = false;
        }
      });
      
      // Excel批量上传处理
      document.getElementById('excelUploadBtn').addEventListener('click', async function() {
        const btn = this;
        const fileInput = document.getElementById('excelFile');
        
        if (!fileInput.files.length) {
          alert('请选择Excel文件');
          return;
        }
        
        // 验证文件类型
        const fileName = fileInput.files[0].name;
        if (!fileName.endsWith('.xlsx')) {
          alert('请上传.xlsx格式的Excel文件');
          return;
        }
        
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 上传中...';
        btn.disabled = true;
        
        try {
          const formData = new FormData();
          formData.append('excelFile', fileInput.files[0]);
          
          const response = await fetch(`${API_BASE_URL}/upload-excel`, {
            method: 'POST',
            body: formData
          });
          
          const result = await response.json();
          
          if (response.ok) {
            document.getElementById('notification').innerHTML = `<i class="fas fa-check-circle"></i> <div>${result.message}</div>`;
            document.getElementById('notification').classList.add('show');
            
            setTimeout(() => {
              fileInput.value = '';
              document.getElementById('notification').classList.remove('show');
              btn.innerHTML = '<i class="fas fa-file-excel"></i> 批量上传Excel';
              btn.disabled = false;
            }, 3000);
          } else {
            alert('批量上传失败: ' + result.error);
            btn.innerHTML = '<i class="fas fa-file-excel"></i> 批量上传Excel';
            btn.disabled = false;
          }
        } catch (error) {
          console.error('Excel上传错误:', error);
          alert('网络错误，批量上传失败');
          btn.innerHTML = '<i class="fas fa-file-excel"></i> 批量上传Excel';
          btn.disabled = false;
        }
      });
      
      // 模拟WebSocket连接状态
      simulateWebSocket();
    });
    let allHalls = [];
    // 加载厅名列表
    async function loadHallList() {
      try {
        const response = await fetch(`${API_BASE_URL}/halls`);
        const halls = await response.json();
        allHalls = halls;
        const hallSelect = document.getElementById('hallName');
        
        // 清除现有选项（保留第一个）
        while (hallSelect.options.length > 1) {
          hallSelect.remove(1);
        }
        
        halls.forEach(hall => {
          const option = document.createElement('option');
          option.value = hall.id;
          option.textContent = hall.hall_name;
          hallSelect.appendChild(option);
        });
      } catch (error) {
        console.error('加载厅名失败:', error);
        document.getElementById('hallNameError').textContent = '加载厅名列表失败，请刷新页面重试';
      }
    }
    
    // 图片预览功能
    function previewImage(input, previewId) {
      if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
          const preview = document.getElementById(previewId);
          preview.innerHTML = `<img src="${e.target.result}" alt="预览图">`;
          preview.style.display = 'block';
        }
        
        reader.readAsDataURL(input.files[0]);
      }
    }
    
    // 模拟WebSocket连接状态
    function simulateWebSocket() {
      const connectionStatus = document.getElementById('connectionStatus');
      const statusIndicator = connectionStatus.querySelector('.status-indicator');
      
      // 随机模拟连接状态变化（实际项目中应使用真实WebSocket）
      setInterval(() => {
        // 80%概率保持连接，20%概率短暂断开
        if (Math.random() < 0.2) {
          statusIndicator.className = 'status-indicator status-offline';
          connectionStatus.querySelector('span:last-child').textContent = '后端服务已断开';
          
          // 3秒后恢复连接
          setTimeout(() => {
            statusIndicator.className = 'status-indicator status-online';
            connectionStatus.querySelector('span:last-child').textContent = '后端服务已连接';
            document.getElementById('notification').innerHTML = '<i class="fas fa-check-circle"></i><div>已重新连接到后端服务</div>';
            document.getElementById('notification').classList.add('show');
            
            setTimeout(() => {
              document.getElementById('notification').classList.remove('show');
            }, 3000);
          }, 3000);
        }
      }, 30000);
    }
  </script>
</body>
</html>
    